<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>DH-F Live Text Editor</title>
  <link href='http://www.dhf.web.id/favicon.ico' rel='icon' type='image/x-icon'>
  <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'> 
  <link rel="stylesheet" href="style.css">
	<link rel="stylesheet" href="codemirror.css">
	<link rel="stylesheet" href="simple-hint.css">	
	<script type="text/javascript" src="codemirror.js"></script>
	<script type="text/javascript" src="javascript.js"></script>
	<script type="text/javascript" src="css.js"></script>
	<script type="text/javascript" src="xml.js"></script>
	<script type="text/javascript" src="htmlmixed.js"></script>
	<script type="text/javascript" src="simple-hint.js"></script>
	<script type="text/javascript" src="zen_codemirror.js"></script>
	<script type="text/javascript" src="downloadify.min.js"></script>
	<script type="text/javascript" src="swfobject.js"></script>
</head>
<body>
	<div id="header">
     <div class="logo" href="http://www.dhf.web.id/"><img src="dHF-logo1.png" alt="dh-f Live Text Editor"></div>
     <div class="dhf">HTML EDITOR</div>
     <div class="dh-f">www.dhf.web.id</div>

		<div id="toolbar">
			<div id="editor-toolbar">
				<h2><span class="icon">H</span>Editor</h2>
				<ul>
					<li id="download">Download</li>
				</ul>
			</div>
			<div id="preview-toolbar">
				<h2><span class="icon">L</span>Preview</h2>
			</div>
		</div>

		<div class="clearfix"></div>
	</div>
	<div id="ide">
		<div id="editor">
			<div class="container">
				<textarea name="" id="editor-area" cols="30" rows="10"></textarea>
			</div>
		</div>
		<div id="preview">
			<div class="container">
				<iframe src frameborder="0" id="preview-area"></iframe>
			</div>
		</div>
	</div>

	<script type="text/javascript">
	
      var delay;
      // Initialize CodeMirror editor with a nice html5 canvas demo.
      var editor = CodeMirror.fromTextArea(document.getElementById('editor-area'), {
        mode: 'text/html',
        tabSize:8,
        indentUnit:8,
        matchBrackets: true,
        lineNumbers:true,
        onChange: function() {
          clearTimeout(delay);
          delay = setTimeout(updatePreview, 300);
        },
       	onKeyEvent: function() {
			return zen_editor.handleKeyEvent.apply(zen_editor, arguments);
		}
      });
      
      function updatePreview() {
        var previewFrame = document.getElementById('preview-area');
        var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
        preview.open();
        preview.write(editor.getValue());
        preview.close();
      }
      setTimeout(updatePreview, 300);
    	
	  Downloadify.create('download',{
	    filename: "index.html",
	    data: function(){ 
	      return editor.getValue();
	    },
	    onComplete: function(){ 
	      alert('Your file has been saved!'); 
	    },
	    onCancel: function(){ 
	      alert('You have cancelled the saving of this file.');
	    },
	    onError: function(){ 
	      alert('You must put something in the File Contents or there will be nothing to save!'); 
	    },
	    transparent: false,
	    swf: 'downloadify.swf',
	    downloadImage:'download.png',
	    width: 100,
	    height: 30,
	    transparent: true,
	    append: false
	  });
	</script>
</body>
</html>